<template>
  <div class="settings">
    <!-- 账户设置 -->
    <div class="section-card">
      <div class="section-header">
        <h3>账户设置</h3>
      </div>
      
      <el-form
        ref="accountFormRef"
        :model="accountForm"
        :rules="accountRules"
        label-width="120px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="accountForm.username" disabled />
        </el-form-item>
        
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="accountForm.email" />
        </el-form-item>
        
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="accountForm.phone" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="saveAccountInfo" :loading="saving">
            保存修改
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 密码修改 -->
    <div class="section-card">
      <div class="section-header">
        <h3>密码修改</h3>
      </div>
      
      <el-form
        ref="passwordFormRef"
        :model="passwordForm"
        :rules="passwordRules"
        label-width="120px"
      >
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input
            v-model="passwordForm.currentPassword"
            type="password"
            show-password
            placeholder="请输入当前密码"
          />
        </el-form-item>
        
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            show-password
            placeholder="请输入新密码"
          />
        </el-form-item>
        
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            show-password
            placeholder="请再次输入新密码"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="changePassword" :loading="changingPassword">
            修改密码
          </el-button>
          <el-button @click="resetPasswordForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 通知设置 -->
    <div class="section-card">
      <div class="section-header">
        <h3>通知设置</h3>
      </div>
      
      <div class="notification-settings">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-title">新订单通知</div>
            <div class="setting-desc">有新订单时发送通知</div>
          </div>
          <el-switch v-model="notificationSettings.newOrder" @change="saveNotificationSettings" />
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-title">评价通知</div>
            <div class="setting-desc">收到新评价时发送通知</div>
          </div>
          <el-switch v-model="notificationSettings.newReview" @change="saveNotificationSettings" />
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-title">系统消息</div>
            <div class="setting-desc">接收系统重要消息</div>
          </div>
          <el-switch v-model="notificationSettings.systemMessage" @change="saveNotificationSettings" />
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-title">营销活动</div>
            <div class="setting-desc">接收营销活动相关通知</div>
          </div>
          <el-switch v-model="notificationSettings.marketing" @change="saveNotificationSettings" />
        </div>
      </div>
    </div>

    <!-- 系统设置 -->
    <div class="section-card">
      <div class="section-header">
        <h3>系统设置</h3>
      </div>
      
      <el-form label-width="120px">
        <el-form-item label="主题模式">
          <el-radio-group v-model="systemSettings.theme" @change="changeTheme">
                <el-radio value="light">浅色模式</el-radio>
                <el-radio value="dark">深色模式</el-radio>
                <el-radio value="auto">跟随系统</el-radio>
              </el-radio-group>
        </el-form-item>
        
        <el-form-item label="语言设置">
          <el-select v-model="systemSettings.language" @change="changeLanguage">
            <el-option label="简体中文" value="zh-CN" />
            <el-option label="English" value="en-US" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="自动保存">
          <el-switch v-model="systemSettings.autoSave" @change="saveSystemSettings" />
          <span style="margin-left: 8px; color: #909399;">自动保存表单数据</span>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据管理 -->
    <div class="section-card">
      <div class="section-header">
        <h3>数据管理</h3>
      </div>
      
      <div class="data-management">
        <div class="data-item">
          <div class="data-info">
            <div class="data-title">导出数据</div>
            <div class="data-desc">导出店铺的订单、菜品等数据</div>
          </div>
          <el-button type="primary" @click="exportData">导出数据</el-button>
        </div>
        
        <div class="data-item">
          <div class="data-info">
            <div class="data-title">清理缓存</div>
            <div class="data-desc">清理系统缓存，提升运行速度</div>
          </div>
          <el-button @click="clearCache">清理缓存</el-button>
        </div>
        
        <div class="data-item">
          <div class="data-info">
            <div class="data-title">数据备份</div>
            <div class="data-desc">备份重要数据，防止数据丢失</div>
          </div>
          <el-button type="warning" @click="backupData">立即备份</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
const accountFormRef = ref()
const passwordFormRef = ref()
const saving = ref(false)
const changingPassword = ref(false)

// 账户信息表单
const accountForm = reactive({
  username: 'merchant001',
  email: 'merchant@example.com',
  phone: '13800138000'
})

const accountRules = {
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
}

// 密码修改表单
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const validateConfirmPassword = (rule, value, callback) => {
  if (value !== passwordForm.newPassword) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const passwordRules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
}

// 通知设置
const notificationSettings = reactive({
  newOrder: true,
  newReview: true,
  systemMessage: true,
  marketing: false
})

// 系统设置
const systemSettings = reactive({
  theme: 'light',
  language: 'zh-CN',
  autoSave: true
})

const saveAccountInfo = async () => {
  if (!accountFormRef.value) return
  
  try {
    await accountFormRef.value.validate()
    saving.value = true
    
    // 模拟保存API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ElMessage.success('账户信息保存成功')
  } catch (error) {
    console.error('保存失败:', error)
  } finally {
    saving.value = false
  }
}

const changePassword = async () => {
  if (!passwordFormRef.value) return
  
  try {
    await passwordFormRef.value.validate()
    changingPassword.value = true
    
    // 模拟修改密码API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ElMessage.success('密码修改成功')
    resetPasswordForm()
  } catch (error) {
    console.error('修改密码失败:', error)
  } finally {
    changingPassword.value = false
  }
}

const resetPasswordForm = () => {
  Object.assign(passwordForm, {
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  })
  if (passwordFormRef.value) {
    passwordFormRef.value.resetFields()
  }
}

const saveNotificationSettings = () => {
  ElMessage.success('通知设置已保存')
}

const changeTheme = (theme) => {
  ElMessage.success(`已切换到${theme === 'light' ? '浅色' : theme === 'dark' ? '深色' : '自动'}模式`)
}

const changeLanguage = (language) => {
  ElMessage.success(`语言已切换到${language === 'zh-CN' ? '简体中文' : 'English'}`)
}

const saveSystemSettings = () => {
  ElMessage.success('系统设置已保存')
}

const exportData = () => {
  ElMessage.success('数据导出功能开发中...')
}

const clearCache = () => {
  ElMessage.success('缓存清理完成')
}

const backupData = () => {
  ElMessage.success('数据备份功能开发中...')
}

onMounted(() => {
  console.log('Settings mounted')
})
</script>

<style lang="scss" scoped>
.settings {
  .section-card {
    background: white;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .section-header {
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #ebeef5;
      
      h3 {
        margin: 0;
        color: #303133;
        font-size: 18px;
        font-weight: 600;
      }
    }
  }
  
  .notification-settings {
    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .setting-info {
        .setting-title {
          font-size: 16px;
          color: #303133;
          margin-bottom: 4px;
        }
        
        .setting-desc {
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }
  
  .data-management {
    .data-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .data-info {
        .data-title {
          font-size: 16px;
          color: #303133;
          margin-bottom: 4px;
        }
        
        .data-desc {
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }
}
</style>